/**
 * 学习目标：react - setState的第三种写法，setState的第二个参数(成功回调函数)
 * 作用： 可以依赖上一次的结果，得到新的结果
 * 💥💥不建议在工作中使用
 * 缺点：
 * 1. 不是合并执行，页面更新了3遍，造成性能的浪费
 * 2. 进入回调地狱中
 */
import React from 'react';
export default class App extends React.Component {
  state = { count: 0 };
  handleClick = () => {
    // sst
    // 多次调用不会直接全部执行，而是会合并
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 2 });
    // this.setState({ count: this.state.count + 3 });
    // this.setState((preState) => {
    //   console.log('上一次state的值 -----> ', preState);
    //   return { count: preState.count + 1 };
    // });
    // this.setState((preState) => {
    //   console.log('上一次state的值 -----> ', preState);
    //   return { count: preState.count + 2 };
    // });
    // this.setState((preState) => {
    //   console.log('上一次state的值 -----> ', preState);
    //   return { count: preState.count + 3 };
    // });
    this.setState({ count: this.state.count + 1 }, () => {
      // 成功回调之后，再 sst 一次
      this.setState({ count: this.state.count + 2 }, () => {
        this.setState({ count: this.state.count + 3 });
      });
    });
  };
  componentDidUpdate() {
    console.log('componentDidUpdate -----> ', this.state.count);
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我+1</button>
        count - {this.state.count}
      </div>
    );
  }
}
